<template>
    <div class="home-container">      
      <!-- 主要内容 -->
      <div class="content">
        <TabSwitcher 
          :tabs="tabs" 
          :active-tab="activeTab" 
          :theme="theme"
          @tab-change="handleTabChange"
        />
        <!-- 总资产卡片 -->
        <div class="asset-card">
          <div class="total-assets">
            <div>{{ $t('common.totalAssets') }}</div>
            <div class="amount">$ {{ totalAssets }}</div>
          </div>
          
          <div class="account-balance">
            <div>
              <div>{{ $t('common.accountBalance') }}</div>
              <div class="balance">$ {{ accountBalance }}</div>
            </div>
            <div class="actions">
              <van-button size="small" type="primary" @click="handleRecharge">
                {{ $t('common.recharge') }}
              </van-button>
              <van-button size="small" type="primary" @click="handleRemittance">
                {{ $t('common.remittance') }}
              </van-button>
              <van-button size="small" type="primary" @click="handleTopUpCard">
                {{ $t('common.topUpCard') }}
              </van-button>
            </div>
          </div>
        </div>
        
        <!-- 虚拟卡部分 -->
        <div class="section">
          <div class="section-header">
            <h3>{{ $t('common.virtualCard') }}</h3>
            <span @click="viewAllCards">{{ $t('common.viewAll') }}</span>
          </div>
          <div class="virtual-cards">
            <CardItem 
              v-for="card in virtualCards" 
              :key="card.id"
              :card="card"
              @recharge="handleCardRecharge(card)"
              @transfer="handleCardTransfer(card)"
            />
          </div>
        </div>
        
        <!-- 交易记录 -->
        <div class="section">
          <div class="section-header">
            <h3>{{ $t('common.transactionBill') }}</h3>
            <span @click="viewAllTransactions">{{ $t('common.all') }} ></span>
          </div>
          <van-cell-group>
            <van-cell v-for="(transaction, index) in recentTransactions" :key="index">
              <template #title>
                <div class="transaction">
                  <div class="type">{{ $t(`common.${transaction.type}`) }}</div>
                  <div :class="['amount', transaction.amount > 0 ? 'positive' : 'negative']">
                    {{ transaction.amount > 0 ? '+' : '' }}${{ Math.abs(transaction.amount) }}
                  </div>
                </div>
              </template>
              <template #label>
                <div class="time">{{ transaction.time }}</div>
                <div class="status">{{ transaction.status }}</div>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import CardItem from '@/components/CardItem.vue'
  import TabSwitcher from '@/components/TabSwitcher.vue'
  
  const router = useRouter()
  
  // 模拟数据
  const totalAssets = ref(598.4)
  const accountBalance = ref(0.00)
  const virtualCards = ref([
    {
      id: 1,
      number: '2100 2100 2100 2100',
      holder: 'YING TAYE',
      expiry: '00/00',
      type: 'VISA Business',
      balance: 598.4
    }
  ])
  const recentTransactions = ref([
    { type: 'transfer', amount: -5, time: '2025-05-06 22:12:05', status: '已划转' },
    { type: 'recharge', amount: +5, time: '2025-05-06 22:12:05', status: '已到账' }
  ])

  const tabs = ref([
    { label: '开卡准备' },
    { label: '虚拟卡' },
    { label: '实体卡', badge: '3' }
  ])
  const activeTab = ref(0)

  const handleTabChange = (index) => {
    activeTab.value = index;
  }

  const handleRecharge = () => {
    // showToast(t('common.rechargeClicked'))
  }
  
  const handleRemittance = () => {
    // showToast(t('common.remittanceClicked'))
  }
  
  const handleTopUpCard = () => {
    // showToast(t('common.topUpCardClicked'))
  }
  
  const handleCardRecharge = (card) => {
    // showToast(`${t('common.recharge')} ${card.number}`)
  }
  
  const handleCardTransfer = (card) => {
    // showToast(`${t('common.transfer')} ${card.number}`)
  }
  
  const viewAllCards = () => {
    router.push({ name: 'Cards' })
  }
  
  const viewAllTransactions = () => {
    // showToast(t('common.viewAllTransactions'))
  }
  </script>
  
  <style lang="scss" scoped>
  .home-container {
    padding: 46px 0 50px;
    min-height: 100vh;
    background-color: var(--bg-color);
    color: var(--text-color);
  }
  
  .content {
    padding: 12px;
  }
  
  .asset-card {
    @include card-style;
    
    .total-assets {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      font-size: 14px;
      color: var(--text-secondary);
      
      .amount {
        font-size: 24px;
        font-weight: bold;
        color: var(--text-color);
      }
    }
    
    .account-balance {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .balance {
        font-size: 18px;
        font-weight: bold;
        margin-top: 4px;
        color: var(--text-color);
      }
      
      .actions {
        display: flex;
        gap: 8px;
        
        :deep(.van-button) {
          flex: 1;
          font-size: 12px;
          padding: 0 8px;
        }
      }
    }
  }
  
  .section {
    @include card-style;
    
    .section-header {
      @include flex-between;
      margin-bottom: 12px;
      
      h3 {
        font-size: 16px;
        margin: 0;
      }
      
      span {
        font-size: 12px;
        color: var(--primary-color);
        cursor: pointer;
      }
    }
  }
  
  .transaction {
    @include flex-between;
    
    .type {
      font-size: 14px;
    }
    
    .amount {
      font-weight: bold;
      
      &.negative {
        color: var(--danger-color);
      }
      
      &.positive {
        color: var(--success-color);
      }
    }
  }
  
  .time, .status {
    font-size: 12px;
    color: var(--text-secondary);
  }
  
  .settings-panel {
    padding: 24px;
    
    h2 {
      margin-top: 0;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border-color);
    }
  }
  </style>